<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运输过程监控</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">运输过程监控</div>
            
            <!-- 监控概览 -->
            <div class="monitor-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="monitor-card normal">
                            <div class="monitor-item">
                                <div class="monitor-number">{{ monitorStats.normal }}</div>
                                <div class="monitor-label">正常运输</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="monitor-card warning">
                            <div class="monitor-item">
                                <div class="monitor-number">{{ monitorStats.warning }}</div>
                                <div class="monitor-label">预警中</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="monitor-card alert">
                            <div class="monitor-item">
                                <div class="monitor-number">{{ monitorStats.alert }}</div>
                                <div class="monitor-label">异常报警</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="monitor-card total">
                            <div class="monitor-item">
                                <div class="monitor-number">{{ monitorStats.total }}</div>
                                <div class="monitor-label">监控总数</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 实时监控面板 -->
            <div class="realtime-monitor">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-card header="实时监控地图">
                            <div id="monitorMap" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;">
                                <span style="color: #999;">车辆实时位置监控地图 (集成GPS定位)</span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card header="监控车辆列表">
                            <div class="vehicle-monitor-list">
                                <div v-for="vehicle in monitorVehicles" :key="vehicle.id" 
                                     class="vehicle-monitor-item" 
                                     :class="{'alert': vehicle.status === 'alert', 'warning': vehicle.status === 'warning'}"
                                     @click="selectVehicle(vehicle)">
                                    <div class="vehicle-info">
                                        <strong>{{ vehicle.plateNo }}</strong>
                                        <span class="status-indicator" :class="vehicle.status"></span>
                                    </div>
                                    <div class="temp-info">
                                        温度: {{ vehicle.temperature }}°C
                                    </div>
                                    <div class="location-info">
                                        {{ vehicle.location }}
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 详细监控数据 -->
            <div class="detailed-monitor" v-if="selectedVehicleData">
                <el-card :header="`${selectedVehicleData.plateNo} 详细监控数据`">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="monitor-chart">
                                <h4>温度监控</h4>
                                <div id="temperatureChart" style="height: 200px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                                    温度曲线图
                                </div>
                                <div class="chart-info">
                                    <span>当前: {{ selectedVehicleData.temperature }}°C</span>
                                    <span>目标: {{ selectedVehicleData.targetTemp }}°C</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="monitor-chart">
                                <h4>湿度监控</h4>
                                <div id="humidityChart" style="height: 200px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                                    湿度曲线图
                                </div>
                                <div class="chart-info">
                                    <span>当前: {{ selectedVehicleData.humidity }}%</span>
                                    <span>正常范围: 45-65%</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="monitor-chart">
                                <h4>油耗监控</h4>
                                <div id="fuelChart" style="height: 200px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                                    油耗统计图
                                </div>
                                <div class="chart-info">
                                    <span>余量: {{ selectedVehicleData.fuelLevel }}%</span>
                                    <span>百公里: {{ selectedVehicleData.fuelConsumption }}L</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="12">
                            <el-card header="关键指标">
                                <div class="key-indicators">
                                    <div class="indicator-item">
                                        <span class="indicator-label">行驶速度:</span>
                                        <span class="indicator-value">{{ selectedVehicleData.speed }} km/h</span>
                                    </div>
                                    <div class="indicator-item">
                                        <span class="indicator-label">已行驶:</span>
                                        <span class="indicator-value">{{ selectedVehicleData.distance }} km</span>
                                    </div>
                                    <div class="indicator-item">
                                        <span class="indicator-label">制冷状态:</span>
                                        <span class="indicator-value" :class="selectedVehicleData.refrigerationStatus === '正常' ? 'status-normal' : 'status-abnormal'">
                                            {{ selectedVehicleData.refrigerationStatus }}
                                        </span>
                                    </div>
                                    <div class="indicator-item">
                                        <span class="indicator-label">GPS信号:</span>
                                        <span class="indicator-value status-normal">{{ selectedVehicleData.gpsSignal }}</span>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card header="报警设置">
                                <div class="alert-settings">
                                    <el-form label-width="100px" size="mini">
                                        <el-form-item label="温度上限">
                                            <el-input-number v-model="alertSettings.tempMax" :precision="1" size="mini"></el-input-number>
                                            <span>°C</span>
                                        </el-form-item>
                                        <el-form-item label="温度下限">
                                            <el-input-number v-model="alertSettings.tempMin" :precision="1" size="mini"></el-input-number>
                                            <span>°C</span>
                                        </el-form-item>
                                        <el-form-item label="湿度上限">
                                            <el-input-number v-model="alertSettings.humidityMax" :precision="0" size="mini"></el-input-number>
                                            <span>%</span>
                                        </el-form-item>
                                        <el-form-item label="低油量警告">
                                            <el-input-number v-model="alertSettings.lowFuel" :precision="0" size="mini"></el-input-number>
                                            <span>%</span>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" size="mini" @click="saveAlertSettings">保存设置</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <!-- 报警记录 -->
            <div class="alert-records">
                <el-card header="报警记录">
                    <div style="margin-bottom: 15px;">
                        <el-select v-model="alertFilter" placeholder="筛选报警类型" style="width: 200px;">
                            <el-option label="全部报警" value="all"></el-option>
                            <el-option label="温度报警" value="temperature"></el-option>
                            <el-option label="湿度报警" value="humidity"></el-option>
                            <el-option label="油耗报警" value="fuel"></el-option>
                            <el-option label="GPS报警" value="gps"></el-option>
                        </el-select>
                        <el-button type="primary" @click="exportAlerts" style="margin-left: 10px;">导出报警记录</el-button>
                    </div>
                    
                    <el-table :data="alertRecords" border>
                        <el-table-column prop="time" label="报警时间" width="160"></el-table-column>
                        <el-table-column prop="plateNo" label="车牌号" width="120"></el-table-column>
                        <el-table-column prop="type" label="报警类型" width="120">
                            <template slot-scope="scope">
                                <el-tag :type="getAlertType(scope.row.type)">
                                    {{ scope.row.type }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="level" label="报警级别" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="getAlertLevel(scope.row.level)" size="mini">
                                    {{ scope.row.level }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="报警描述" min-width="200"></el-table-column>
                        <el-table-column prop="location" label="报警位置" width="150"></el-table-column>
                        <el-table-column prop="status" label="处理状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleAlert(scope.row)" v-if="scope.row.status === '未处理'">处理</el-button>
                                <el-button size="mini" @click="viewAlertDetail(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    monitorStats: {
                        normal: 15,
                        warning: 3,
                        alert: 1,
                        total: 19
                    },
                    monitorVehicles: [
                        {
                            id: 1,
                            plateNo: '京A12345',
                            temperature: -15.2,
                            status: 'normal',
                            location: '京沪高速济南段'
                        },
                        {
                            id: 2,
                            plateNo: '京B67890',
                            temperature: -12.8,
                            status: 'warning',
                            location: '沪宁高速苏州段'
                        },
                        {
                            id: 3,
                            plateNo: '京C11111',
                            temperature: -8.5,
                            status: 'alert',
                            location: '京港澳高速郑州段'
                        }
                    ],
                    selectedVehicleData: null,
                    alertSettings: {
                        tempMax: -10,
                        tempMin: -20,
                        humidityMax: 70,
                        lowFuel: 20
                    },
                    alertFilter: 'all',
                    alertRecords: [
                        {
                            time: '2024-01-15 14:30:25',
                            plateNo: '京C11111',
                            type: '温度报警',
                            level: '严重',
                            description: '车厢温度超过上限，当前温度-8.5°C',
                            location: '京港澳高速郑州段',
                            status: '未处理'
                        },
                        {
                            time: '2024-01-15 13:45:10',
                            plateNo: '京B67890',
                            type: '湿度报警',
                            level: '警告',
                            description: '车厢湿度偏高，当前湿度75%',
                            location: '沪宁高速苏州段',
                            status: '已处理'
                        },
                        {
                            time: '2024-01-15 12:20:15',
                            plateNo: '京D22222',
                            type: '油耗报警',
                            level: '提醒',
                            description: '燃油量不足，剩余15%',
                            location: '京沪高速天津段',
                            status: '已处理'
                        }
                    ]
                }
            },
            methods: {
                selectVehicle(vehicle) {
                    // 模拟选择车辆后加载详细数据
                    this.selectedVehicleData = {
                        plateNo: vehicle.plateNo,
                        temperature: vehicle.temperature,
                        targetTemp: -18,
                        humidity: 62,
                        fuelLevel: 75,
                        fuelConsumption: 28.5,
                        speed: 85,
                        distance: 450,
                        refrigerationStatus: vehicle.status === 'alert' ? '异常' : '正常',
                        gpsSignal: '强信号'
                    };
                },
                saveAlertSettings() {
                    this.$message.success('报警设置已保存');
                },
                exportAlerts() {
                    this.$message.success('报警记录导出成功');
                },
                getAlertType(type) {
                    const typeMap = {
                        '温度报警': 'danger',
                        '湿度报警': 'warning',
                        '油耗报警': 'info',
                        'GPS报警': 'primary'
                    };
                    return typeMap[type] || 'info';
                },
                getAlertLevel(level) {
                    const levelMap = {
                        '严重': 'danger',
                        '警告': 'warning',
                        '提醒': 'info'
                    };
                    return levelMap[level] || 'info';
                },
                handleAlert(alert) {
                    this.$confirm('确认处理此报警吗？', '处理报警', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        alert.status = '已处理';
                        this.$message.success('报警处理完成');
                    });
                },
                viewAlertDetail(alert) {
                    this.$message.info('查看报警详情：' + alert.description);
                }
            },
            mounted() {
                // 默认选择第一个车辆
                if (this.monitorVehicles.length > 0) {
                    this.selectVehicle(this.monitorVehicles[0]);
                }
            }
        });
    </script>

    <style scoped>
        .monitor-overview {
            margin-bottom: 20px;
        }
        
        .monitor-card {
            text-align: center;
            cursor: pointer;
        }
        
        .monitor-card.normal {
            border-left: 4px solid #67C23A;
        }
        
        .monitor-card.warning {
            border-left: 4px solid #E6A23C;
        }
        
        .monitor-card.alert {
            border-left: 4px solid #F56C6C;
        }
        
        .monitor-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .monitor-number {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
        
        .monitor-label {
            color: #606266;
            margin-top: 5px;
        }
        
        .realtime-monitor {
            margin-bottom: 20px;
        }
        
        .vehicle-monitor-list {
            max-height: 350px;
            overflow-y: auto;
        }
        
        .vehicle-monitor-item {
            padding: 10px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .vehicle-monitor-item:hover {
            border-color: #409EFF;
        }
        
        .vehicle-monitor-item.warning {
            border-color: #E6A23C;
            background-color: #fdf6ec;
        }
        
        .vehicle-monitor-item.alert {
            border-color: #F56C6C;
            background-color: #fef0f0;
        }
        
        .vehicle-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .status-indicator.normal {
            background-color: #67C23A;
        }
        
        .status-indicator.warning {
            background-color: #E6A23C;
        }
        
        .status-indicator.alert {
            background-color: #F56C6C;
        }
        
        .temp-info, .location-info {
            font-size: 12px;
            color: #666;
        }
        
        .detailed-monitor {
            margin-bottom: 20px;
        }
        
        .monitor-chart h4 {
            text-align: center;
            color: #409EFF;
            margin-bottom: 10px;
        }
        
        .chart-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }
        
        .key-indicators {
            padding: 10px 0;
        }
        
        .indicator-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 5px 0;
            border-bottom: 1px dotted #e4e7ed;
        }
        
        .indicator-label {
            color: #666;
        }
        
        .indicator-value {
            font-weight: bold;
        }
        
        .status-normal {
            color: #67C23A;
        }
        
        .status-abnormal {
            color: #F56C6C;
        }
        
        .alert-settings {
            padding: 10px 0;
        }
        
        .alert-records {
            margin-bottom: 20px;
        }
    </style>
</body>
</html>